import React, { useEffect, useMemo, useState } from 'react'
import 'tdesign-react/es/style/index.css'
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { Layout } from 'tdesign-react';
import { UserOutlined, PoweroffOutlined } from '@ant-design/icons';
import { Menu } from "antd";
import * as axios from '../axiosAPI/zxr'

export default function Backhome() {
    const { Header } = Layout;
    let {location, pathname} = useLocation()
    let navigate = useNavigate()
    let uid = sessionStorage.getItem('uid')
    let [list, setList] = useState([])
    let [pathfather, setPathfather] = useState(pathname)

    let father = useMemo(() => {
        list.forEach(item => { 
            if(item.children){
                item.children.forEach(el => {
                    if(el.key === pathname){
                        setPathfather(item.key)
                    }
                })
            }else{
                setPathfather(item.key)
            }
        })
    }, [pathname])

    let getList = async () => {
        let result = await axios.default.getlist(uid)
        if (result.state) {
            setList(result.list)
        }
    }

    let loginout = () => {
        sessionStorage.removeItem('uid')
        sessionStorage.removeItem('uname')
        localStorage.removeItem('accessToken')
        localStorage.removeItem('refreshToken')
        navigate('/backlogin')
    }
    useEffect(() => {
        getList()
    }, [])
    return (
        <div className="backhome">
            <Layout>
                <Header className='head'>
                    <h2>在线考试系统</h2>
                    <div className="right">
                        <UserOutlined className='user' />
                        <span className='uname'>{sessionStorage.getItem('uname')}</span>
                        <span className='logout' onClick={() => {loginout()}}><PoweroffOutlined /></span>
                    </div>
                </Header>
                <main>
                    <div className='aside'>
                        <Menu
                            className='menu'
                            defaultSelectedKeys={[pathfather]}
                            defaultOpenKeys={[pathname]}
                            mode="inline"
                            items={list}
                            onClick={(val) => { navigate(val.key) }}
                        />
                    </div>
                    <div className='con'>
                        <Outlet></Outlet>
                    </div>
                </main>
            </Layout>
        </div>
    )
}
